<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北游论坛</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/com.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
  <header class="myheader">
        <div class="header_main">
            <div class="header_left">
                <a href="./index.html">北游论坛 </a>
            </div>
            <div class="header_right">          
                <div onclick="goSend()">
                    <a href="javascript:;">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        发表
                    </a>
                </div>
                <div  id="login">
                    <a href="./pages/login.html">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        登录
                    </a>
                </div>
                <div  id="user">
                    <a href="javascript:;">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <span id="username"></span>
                    </a>
                    <ul class="user_nav">
                        <li onclick="goUplaod()">
                            上传头像
                        </li>
                        <li onclick="goMineLt()">
                            我的论坛
                        </li>
                        <li onclick="goOutLogin()">
                            退出
                        </li>
                    </ul>
                </div>
                <div  class="user_photo">
                    <a href="javascript:;">
                        <img src="http://106.12.150.223:9000/header/admin.png" alt="" id="user_img">
                    </a>
                </div>
            </div>
        </div>
  </header>
  <main class="formMine">
 
  </main>
  <!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">评论</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <textarea class="form-control" rows="9" id="content"></textarea>
                  </div>                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="sendPinglun()">评论</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./js/sendAjax.js"></script>
<script src="./js/template.js"></script>
<script src="./js/getTime.js"></script>
<script id="block" type="text/html">
    {{each data as item index}}
    <div class="panel panel-info">
        <div class="panel-heading">
            <img src="{{item.headerUrl}}" alt="" onclick="goMine('{{item.username}}')"> &nbsp; <span>{{item.username}}</span>
            &nbsp; <span>{{item.time}}</span>
        </div>
        <div class="panel-body">
           <div class="content">
            {{item.content}}
            <button type="button" class="btn btn-success pinglun" onclick="pinglun('{{index}}')">评论</button>
           </div>
           <div class="mypinglun">
            {{if item.pinglun.length!==0}}
            <h5>
                评论列表：
              </h5>
              {{/if}}
                <div>
                    {{each item.pinglun as pl i}}
                    <div class="pingluns">
                        <div>
                            <img src="{{pl.userPhoto}}" alt="" onclick="goMine('{{pl.username}}')">
                        </div>
                        <div class="plright">
                            <h4>{{pl.username}}</h4>
                            <p class="content">
                                {{pl.content}}
                            </p>
                            <p class="time">{{pl.time}}</p>
                        </div>
                    </div>
                    {{/each}}
                </div>
           </div>
        {{if item.username === username}}
        <div class="remove">
            <span onclick="removeLun('{{index}}')"><i class="fa fa-trash-o" aria-hidden="true"></i> 删除</span>
        </div>
        {{/if}}
        </div>
    </div>
    {{/each}}
</script>
<script>
    // 向后端发送请求判断登录状态
    let isLogin = async ()=>{
        let res = await sendAjax("/isLogin","get");
        console.log(res)
        // 已登录
        if(res.code===0){
            $("#login").hide();
            $("#username").text(res.data.username)
            $("#user").show();
            $(".user_photo").show();
            getUserPhoto();
        }else{
            $("#login").show(); 
            $("#user").hide();
            $(".user_photo").hide();
        }
    }
    isLogin();
    // 退出登录
    async function goOutLogin(){
        let res = await sendAjax("/outLogin","get");
        console.log(res)
        isLogin();
    }
    function goUplaod(){
        window.location.href = './pages/upload.html'
    }
    // 获取用户头像信息
    async function getUserPhoto(){
        let res = await sendAjax("/userPhoto","get");
        console.log(res)
        if(res.code===0){
            $("#user_img").attr("src",res.url)
        }else{
            alert(res.msg)
        }
    }
    // 去发表
    async function goSend(){
        // 判断当前用户是否已登录
        let res = await sendAjax("/isLogin","get");
        if(res.code===0){
            window.location.href = './pages/send.html'
        }else{
            window.location.href = './pages/login.html'
        }
    }
    // 发送ajax请求获取论坛列表信息
    async function getDataList(){
        let reslut = await sendAjax("/isLogin","get");
        let res = await sendAjax("get/list/","get");
        if(res.code!==0){
            alert(res.msg)
            return
        }
        console.log(res.data)
        // 判断当前是否有论坛列表
        if(res.data.length===0){
            let p = "<p class='nodata'>暂无数据~~~</p>"
            $(".formMine").html(p)
            return
        }
        let html = template("block",{data:res.data,username:reslut.data.username});
        // console.log(html)
        $(".formMine").html(html)
    }
    getDataList();

    function goMine(username){
        window.location.href = './pages/mymsg.html?username='+username
    }
    // 当前评论的论坛索引
    let msgIndex;
    // 评论
    async function pinglun(index){
        msgIndex = index;
        // 判断当前是否登录
        let res = await sendAjax("/isLogin","get");
        console.log(res)
        if(res.code === 0){
            // 显示莫太框
            $('#myModal').modal('show')
        }else{
            window.location.href = './pages/login.html'
        }

    }

    async function sendPinglun(){
        // 获取评论内容
        let content = $("#content").val();
        if(!content){
            alert("请您输入评论内容")
            return
        }
        // 获取评论时间
        let time = getTime();
        // 获取评论人头像
        let userPhoto = $("#user_img").attr("src");
        //向后端发送请求将当前评论的论坛索引传递给后端 将评论人 评论时间评论内容 评论人头像也要传递给后端。
        let res =await sendAjax(`/user/pinglun`,'post',{msgIndex,content,time,userPhoto})
        console.log(res)
        if(res.code==0){
            $("#content").val("");
            $('#myModal').modal('hide')
            // 重新请求数据列表
            getDataList();
        }
    }

    async function goMineLt(){
        let res = await sendAjax("/isLogin","get");
        window.location.href = './pages/mymsg.html?username='+res.data.username
    }

   async function removeLun(index){
       let res = await sendAjax("/remove/luntan","get",{index});
       if(res.code ===0){
        alert("删除成功")
        getDataList();
       }else{
        alert(res.msg)
       }
    }
</script>
</html>